<template>
    <div>
        <div class="search">
        <input v-model="keyword" class="search-input" type="text" placeholder="输入城市或拼音">        
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="searcj-item border-bottom" v-for="item of list" :key="item.id" @click="headleCityClick(item.name)">{{item.name}}</li>
                <li class="searcj-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
    name:'CitySearch',
    props:{
        cities:Object
    },
    data(){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
    computed: {
        hasNoData(){
            return !this.list.length
        }
        
    },
    watch: {
        keyword(){
            if(this.timer){
                clearTimeout(this.timer)
            }
            if(!this.keyword){
                this.list=[]
                return
            }
            this.timer=setTimeout(()=>{
                const result=[]
                for(let i in this.cities){
                    this.cities[i].forEach((value)=>{
                        if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
                            result.push(value)
                          }
                        })
                    }
                this.list=result
            },100)
        }
    },
    //搜索时候可以滚动
    mounted () {
        this.scroll=new Bscroll(this.$refs.search)        
    },
     methods: {
       headleCityClick(city){
           this.$store.dispatch("changeCity", city)
           this.$router.push({ name: 'Home'})
       }
    }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl";
.search{
   height .72rem
   padding 0 .1rem
   background #00bcd4
}
.search-input{
    box-sizing border-box
    width 100%
    height .62rem
    line-height .62rem
    text-align center
    border-radius .06rem 
    color #666
    padding 0 .1rem
    font-size 0.3rem
}
.search-content{
    z-index 1
    overflow hidden
    position absolute
    top 1.58rem
    left 0
    right 0
    bottom 0
    background #eee
}
.searcj-item{
    line-height .62rem
    padding-left .2rem
    color #666
    border-bottom: 1px solid #f6efef
    background #ffffff
}

</style>
